<template>
  <div class="login">
    <!-- 返回 -->
      <div class="back" @click="$router.go(-1)">
        <svg t="1667887970028" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12137" width="200" height="200"><path d="M658.29178 1003.504117l223.006914 0L398.119373 520.342595 881.298746 0 658.291782 0 175.112507 520.342595 658.29178 1003.504117z" p-id="12138" fill="#8a8a8a"></path></svg>
      </div>
      <!-- logo -->
      <div class="logo">
        <img src="../assets/imgs/logo.jpg" alt="">
      </div>
      <!-- 表单 -->
      <form class="form" v-if="type == 1">
         <div class="one"><div class="six">+86</div><input type="text" placeholder="请输入手机号" v-model="phone"></div>
         <div class="two"><input type="password" name="password" placeholder="请输入密码" v-model="password"></div>
         <div class="three"><input type="submit" name="submit" value="登录" @click="submit" :class="[(phone&&password)!=''?'con':'']"></div>
      </form>
      <!-- 表单2 -->

      <!-- 注册登录a -->
      <div class="zhmm" v-if="type == 1">
        <div class="one">
          账号密码登录<svg t="1667889701845" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13096" width="200" height="200"><path d="M857.70558 495.009024 397.943314 27.513634c-7.132444-7.251148-18.794042-7.350408-26.048259-0.216941-7.253194 7.132444-7.350408 18.795065-0.216941 26.048259l446.952518 454.470749L365.856525 960.591855c-7.192819 7.192819-7.192819 18.85544 0 26.048259 3.596921 3.596921 8.311293 5.39487 13.024641 5.39487s9.42772-1.798972 13.024641-5.39487L857.596086 520.949836C864.747973 513.797949 864.796068 502.219239 857.70558 495.009024z" p-id="13097" fill="#0676e2"></path></svg>
        </div>
        <div class="two">
          新用户注册<svg t="1667889701845" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13096" width="200" height="200"><path d="M857.70558 495.009024 397.943314 27.513634c-7.132444-7.251148-18.794042-7.350408-26.048259-0.216941-7.253194 7.132444-7.350408 18.795065-0.216941 26.048259l446.952518 454.470749L365.856525 960.591855c-7.192819 7.192819-7.192819 18.85544 0 26.048259 3.596921 3.596921 8.311293 5.39487 13.024641 5.39487s9.42772-1.798972 13.024641-5.39487L857.596086 520.949836C864.747973 513.797949 864.796068 502.219239 857.70558 495.009024z" p-id="13097" fill="#0676e2"></path></svg>
        </div>
      </div>

      <!-- 其他登录方式 -->
      <div class="qita">
        <div class="header">
          其他方式登录
        </div>
        <div class="body">
          <div class="qq" @click="qq">
            <svg t="1667890197241" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14393" width="200" height="200"><path d="M824.8 613.2c-16-51.4-34.4-94.6-62.7-165.3C766.5 262.2 689.3 112 511.5 112 331.7 112 256.2 265.2 261 447.9c-28.4 70.8-46.7 113.7-62.7 165.3-34 109.5-23 154.8-14.6 155.8 18 2.2 70.1-82.4 70.1-82.4 0 49 25.2 112.9 79.8 159-26.4 8.1-85.7 29.9-71.6 53.8 11.4 19.3 196.2 12.3 249.5 6.3 53.3 6 238.1 13 249.5-6.3 14.1-23.8-45.3-45.7-71.6-53.8 54.6-46.2 79.8-110.1 79.8-159 0 0 52.1 84.6 70.1 82.4 8.5-1.1 19.5-46.4-14.5-155.8z" p-id="14394"></path></svg>
            QQ
          </div>
          <div class="wx" @click="wx">
            <svg t="1667890499809" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16310" width="200" height="200"><path d="M664.250054 368.541681c10.015098 0 19.892049 0.732687 29.67281 1.795902-26.647917-122.810047-159.358451-214.077703-310.826188-214.077703-169.353083 0-308.085774 114.232694-308.085774 259.274068 0 83.708494 46.165436 152.460344 123.281791 205.78483l-30.80868 91.730191 107.688651-53.455469c38.558178 7.53665 69.459978 15.308661 107.924012 15.308661 9.66308 0 19.230993-0.470721 28.752858-1.225921-6.025227-20.36584-9.521864-41.723264-9.521864-63.862493C402.328693 476.632491 517.908058 368.541681 664.250054 368.541681zM498.62897 285.87389c23.200398 0 38.557154 15.120372 38.557154 38.061874 0 22.846334-15.356756 38.156018-38.557154 38.156018-23.107277 0-46.260603-15.309684-46.260603-38.156018C452.368366 300.994262 475.522716 285.87389 498.62897 285.87389zM283.016307 362.090758c-23.107277 0-46.402843-15.309684-46.402843-38.156018 0-22.941502 23.295566-38.061874 46.402843-38.061874 23.081695 0 38.46301 15.120372 38.46301 38.061874C321.479317 346.782098 306.098002 362.090758 283.016307 362.090758zM945.448458 606.151333c0-121.888048-123.258255-221.236753-261.683954-221.236753-146.57838 0-262.015505 99.348706-262.015505 221.236753 0 122.06508 115.437126 221.200938 262.015505 221.200938 30.66644 0 61.617359-7.609305 92.423993-15.262612l84.513836 45.786813-23.178909-76.17082C899.379213 735.776599 945.448458 674.90216 945.448458 606.151333zM598.803483 567.994292c-15.332197 0-30.807656-15.096836-30.807656-30.501688 0-15.190981 15.47546-30.477129 30.807656-30.477129 23.295566 0 38.558178 15.286148 38.558178 30.477129C637.361661 552.897456 622.099049 567.994292 598.803483 567.994292zM768.25071 567.994292c-15.213493 0-30.594809-15.096836-30.594809-30.501688 0-15.190981 15.381315-30.477129 30.594809-30.477129 23.107277 0 38.558178 15.286148 38.558178 30.477129C806.808888 552.897456 791.357987 567.994292 768.25071 567.994292z" p-id="16311"></path></svg>
            微信
          </div>
          <div class="wb" @click="wb">
            <svg t="1667890479775" class="icon" viewBox="0 0 1138 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15333" width="200" height="200"><path d="M914.432 518.144q27.648 21.504 38.912 51.712t9.216 62.976-14.336 65.536-31.744 59.392q-34.816 48.128-78.848 81.92t-91.136 56.32-94.72 35.328-89.6 18.944-75.264 7.68-51.712 1.536-49.152-2.56-68.096-10.24-78.336-21.504-79.872-36.352-74.24-55.296-59.904-78.848q-16.384-29.696-22.016-63.488t-5.632-86.016q0-22.528 7.68-51.2t27.136-63.488 53.248-75.776 86.016-90.112q51.2-48.128 105.984-85.504t117.248-57.856q28.672-10.24 63.488-11.264t57.344 11.264q10.24 11.264 19.456 23.04t12.288 29.184q3.072 14.336 0.512 27.648t-5.632 26.624-5.12 25.6 2.048 22.528q17.408 2.048 33.792-1.536t31.744-9.216 31.232-11.776 33.28-9.216q27.648-5.12 54.784-4.608t49.152 7.68 36.352 22.016 17.408 38.4q2.048 14.336-2.048 26.624t-8.704 23.04-7.168 22.016 1.536 23.552q3.072 7.168 14.848 13.312t27.136 12.288 32.256 13.312 29.184 16.384zM656.384 836.608q26.624-16.384 53.76-45.056t44.032-64 18.944-75.776-20.48-81.408q-19.456-33.792-47.616-57.344t-62.976-37.376-74.24-19.968-80.384-6.144q-78.848 0-139.776 16.384t-105.472 43.008-72.192 60.416-38.912 68.608q-11.264 33.792-6.656 67.072t20.992 62.976 42.496 53.248 57.856 37.888q58.368 25.6 119.296 32.256t116.224 0.512 100.864-21.504 74.24-33.792zM522.24 513.024q20.48 8.192 38.912 18.432t32.768 27.648q10.24 12.288 17.92 30.72t10.752 39.424 1.536 42.496-9.728 38.912q-8.192 18.432-19.968 37.376t-28.672 35.328-40.448 29.184-57.344 18.944q-61.44 11.264-117.76-11.264t-88.064-74.752q-12.288-39.936-13.312-70.656t16.384-66.56q13.312-27.648 40.448-51.712t62.464-38.912 75.264-17.408 78.848 12.8zM359.424 764.928q37.888 3.072 57.856-18.432t21.504-48.128-15.36-47.616-52.736-16.896q-27.648 3.072-43.008 23.552t-17.408 43.52 9.728 42.496 39.424 21.504zM778.24 6.144q74.752 0 139.776 19.968t113.664 57.856 76.288 92.16 27.648 122.88q0 33.792-16.384 50.688t-35.328 17.408-35.328-14.336-16.384-45.568q0-40.96-22.528-77.824t-59.392-64.512-84.48-43.52-96.768-15.872q-31.744 0-47.104-15.36t-14.336-34.304 18.944-34.304 51.712-15.36zM778.24 169.984q95.232 0 144.384 48.64t49.152 146.944q0 30.72-10.24 43.52t-22.528 11.264-22.528-14.848-10.24-35.84q0-60.416-34.816-96.256t-93.184-35.84q-19.456 0-28.672-10.752t-9.216-23.04 9.728-23.04 28.16-10.752z" p-id="15334"></path></svg>
            微博
          </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      phone:"",
      password:"",
      type:1
    }
  },
  methods:{
    submit(){
            let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
            let pass = /^[a-zA-Z0-9]\w{8,17}$/;
            if(!reg.test(this.phone) || !pass.test(this.password) ){//不正确处理
                    this.$toast("手机号码密码错误");
                    return;
            }else{
                window.localStorage.setItem("token",this.phone)
                this.$toast("登录成功");
                this.$router.push("/home");
                return
            }
    },
    qq(){
      this.$toast("暂未开放此功能");
    },
    wx(){
      this.$toast("暂未开放此功能");
    },
    wb(){
      this.$toast("暂未开放此功能");
    }
  }
}
</script>

<style lang="scss">
.login .qita{
  width: 90%;
  margin: 0 auto;
  margin-top: 80px;
  .header{
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    color:#999;
  } 
  .body{
    width: 100%;
    display: flex;
    height: 50px;
    justify-content: center;
    margin-top: 30px;
    .qq{
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      svg{
        width: 40px;
        height: 40px;
      }
    }
    .wx{
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      svg{
        width: 40px;
        height: 40px;
      }
    }
    .wb{
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      svg{
        width: 40px;
        height: 40px;
      }
    }
  } 

}
.login .zhmm{
  width: 80%;
  margin: 0 auto;
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: space-between;
  .one{
      color: #0676e2;
      font-size: 12px;
      svg{
        width: 10px;
        height: 10px;
      }
  }
  .two{
      color: #0676e2;
      font-size: 12px;
      svg{
        width: 10px;
        height: 10px;
      }
  }
}
.login .form{
  width: 80%;
  margin: 0 auto;
  .one{
    width: 100%;
    display: flex;
    align-items: center;
    height: 40px;
    .six{
      height: 40px;
      width: 50px;
      text-align: center;
      line-height: 40px;
      background-color: #e4dddd;
      border-radius: 20px 0 0 20px;
    }
    input{
      height: 40px;
      border-radius: 0 20px 20px 0 ;
      background-color: #e4dddd;
      font-size: 16px;
      flex: 1;
      border: none;
      outline: none;
      text-indent: 20px;
    }
  }
  .two{
    width: 100%;
    margin-top: 20px;
    height: 40px;
    input{
      width: 100%;
      height: 40px;
      background-color: #e4dddd;
      border-radius: 20px;
      outline: none;
      border: none;
      text-indent: 20px;
    }
  }
  .three{
    width: 100%;
    margin-top: 20px;
    height: 40px;
    input{
      width: 100%;
      height: 40px;
      background-color: #fef6c4;
      border-radius: 20px;
      font-size: 20px;
      font-weight: bold;
      color: #c0bb98;
      outline: none;
      border: none;
      &.con{
        background-color: #ffe300;
      }
    }
  }
}
.login .logo{
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  img{
    display: block;
    width: 80px;
    height: 80px;
  }
}
.login .back{
    width: 20px;
    height: 20px;
    position: fixed;
    top: 10px;
    left: 10px;
    svg{
      width: 20px;
      height: 20px;
    }
}
</style>